<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>积分兑换</title>
    <script src="js/alert.js"></script>
    <style>
    .bean {
        width: 96%;
        height: 100px;
        margin-left: 2%;
        background-color: #ffffff;
        border-radius: 5px;
        margin-top: 4%;
        background-image: url("img/qq.png");
        background-size: 100%;
        background-repeat: round;
    }

    .bean-l {
        width: 28%;
        float: left;
        height: 100px;
        color: #60d360;
        text-align: center;
    }

    .bean-r {
        width: 72%;
        float: left;
        height: 100px;
    }

    .bean-r-small div {
        margin-bottom: 8px;
    }
</style>
</head>


<body style="background-color: #445b8b">

<div style="width: 96%;height: 100px;margin-left: 2%;background-color: #ffffff;border-radius: 5px;">
    <div style="line-height: 100px;font-size: 1.2em">
        <span style="margin-left: 5%">可兑换积分</span>
        <span style="float: right;margin-right: 5%;" id="integral"> </span>
    </div>
</div>

<div id="data" style="margin-top: 4%">

   <!-- <div class="bean">
        <div class="bean-l">
            <div style="margin-top: 20px;font-size: 24px">10<span style="font-size: 13px">积分</span></div>
            <div style="font-size: 14px">立即兑换</div>
        </div>

        <div class="bean-r">
            <div style="margin: 6% 0 0 8%;" class="bean-r-small">
                <div>10元优惠券</div>
                <div style="font-size: 12px">仅限积分兑换使用</div>
                <div style="font-size: 9px;color: #747474">有效期: 2019-6-10至2019-12-5</div>
            </div>
        </div>
    </div>

    <div class="bean">
        <div class="bean-l">
            <div style="margin-top: 20px;font-size: 24px">10<span style="font-size: 13px">积分</span></div>
            <div style="font-size: 14px">立即兑换</div>
        </div>

        <div class="bean-r">
            <div style="margin: 6% 0 0 8%;" class="bean-r-small">
                <div>10元优惠券</div>
                <div style="font-size: 12px">仅限积分兑换使用</div>
                <div style="font-size: 9px;color: #747474">有效期: 2019-6-10至2019-12-5</div>
            </div>
        </div>
    </div>

    <div class="bean">
        <div class="bean-l">
            <div style="margin-top: 20px;font-size: 24px">10<span style="font-size: 13px">积分</span></div>
            <div style="font-size: 14px">立即兑换</div>
        </div>

        <div class="bean-r">
            <div style="margin: 6% 0 0 8%;" class="bean-r-small">
                <div>10元优惠券</div>
                <div style="font-size: 12px">仅限积分兑换使用</div>
                <div style="font-size: 9px;color: #747474">有效期: 2019-6-10至2019-12-5</div>
            </div>
        </div>
    </div>-->


</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(
        show(),getuserdata()
    );
    
    function getuserdata() {
        $.ajax({
            "url": "/vip/getuser/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var data = json.data;
                $("#integral").html(data.integral);
            }
        })
    }

    function show() {
        $.ajax({
            "url": "/coupon/showconversion/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                $("#data").empty();
                console.log(json.data);
                var list = json.data;
                for (var i = 0; i < list.length; i++) {
                    var data = list[i];
                    var html = '<div class="bean">\n' +
                        '        <div class="bean-l" data-id="#{tid}">\n' +
                        '            <div style="margin-top: 20px;font-size: 24px">#{integral}<span style="font-size: 13px">积分</span></div>\n' +
                        '            <div style="font-size: 14px">立即兑换</div>\n' +
                        '        </div>\n' +
                        '        <div class="bean-r">\n' +
                        '            <div style="margin: 6% 0 0 8%;" class="bean-r-small">\n' +
                        '                <div>#{name}</div>\n' +
                        '                <div style="font-size: 12px">#{expl}</div>\n' +
                        '                <div style="font-size: 10px;color: #747474">有效期:  #{datebeg}至#{dateend}</div>\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '    </div>';

                    html = html.replace("#{tid}", data.id);
                    html = html.replace("#{integral}", data.integral);
                    html = html.replace("#{name}", data.name);
                    html = html.replace("#{expl}", data.expl);
                    html = html.replace("#{datebeg}", data.datebeg);
                    html = html.replace("#{dateend}", data.dateend);
                    $("#data").append(html);
                }
                var bo = true;
                $(".bean-l").click(function () {
                    var id = $(this).data("id");
                    if (!bo){
                        return
                    }
                    bo = false;
                    $.ajax({
                        "url": "/coupon/conversion/",
                        "data": "tid=" + id,
                        "type": "POST",
                        "dataType": "json",
                        "success": function (json) {
                            bo = true;
                            if (json.state == 200) {
                                alert("兑换成功,请注意查收");
                                getuserdata();
                            } else {
                                alert("积分不够？完成会员任务会有丰富的积分奖励哦")
                            }
                        }
                    })
                });


            }
        })
    }
</script>
</html>